<template>
  <a-table :dataSource="dataSource" :columns="columns" />
</template>
<script setup>
import { ref } from 'vue'
import csv from 'csvtojson'
import axios from 'axios'

let dataSource = ref([])
let columns = ref([])
axios.get('/users.csv', { responseType: 'blob' }).then(response => {
  let reader = new FileReader()
  // 读取文件中的内容，执行读文件函数，设置编码格式。
  reader.readAsText(response.data, 'UTF-8')
  // 读取文件，得到文件内容。
  reader.onload = function (e) {
    let content = e.target.result
    csv({
      // output: 'csv',
    })
      .fromString(content)
      .then(function (result) {
        console.log(result)
        dataSource.value = result.map((row, index) => {
          return { key: index, ...row }
        })
        if (result.length) {
          columns.value = Object.keys(result[0]).map(key => {
            return {
              title: key,
              dataIndex: key,
              key: key,
            }
          })
        }
      })
  }
})
</script>
